<template>
  <view class="container min-h-screen bg-white">

    <Gap height="16rpx" />
    <view class="flex items-center w-96 rounded-lg bg-white  ">
      <uni-easyinput prefixIcon="search" v-model="search" placeholder="输入搜索你想要的宝贝" @clear="search = ``"
        @confirm="getProductList(false)" />
      <text class=" px-2 bg-white " @tap="toIndex">取消</text>
    </view>
    <Gap height="16rpx" />
    <view class=" w-full qj-bg-color flex-grow ">
      <view v-if="prizeList.length > 0" class="flex justify-center prize-container w-full">
        <view class="flex justify-between flex-wrap w-96 mx-2 mb-9">
          <view v-for="item in prizeList" :key="item?.id"
            class="prize-content flex flex-col items-center bg-white rounded-2xl mt-2" @click="toProductDetail(item)">
            <image :src="item?.image" mode="scaleToFill" class=" rounded-2xl mt-3" />
            <text>{{ item?.store_name }}</text>
          </view>
        </view>
      </view>
    </view>



  </view>
</template>

<script setup lang="ts">
import { toProductDetail } from "@/api/common";
import { productlist, uiwu } from "@/api/interface/interface";
import type { ApiResponse, ProductListResponse, ProductSimpleResponse } from "@/api/type/interface";
import Gap from "@/components/gap.vue";
import { reactive, ref, watch } from "vue";
const pageNum = ref<number>(1)

/** 奖品列表 */
const prizeList = reactive<Partial<ProductSimpleResponse[]>>([]);

const search = ref("");

const toIndex = () => {

  let url = `/pages/index/index`;
  uni.navigateTo({ url });
  return;
};


const getProductList = async (isMore: boolean = false) => {
  if (false === isMore) {
    console.log("isMore " + isMore);
    pageNum.value = 1;
    prizeList.length = 0;
  } else {
    console.log("isMore 2 " + isMore);
    pageNum.value++;
  }
  uni.showLoading({
    title: '搜索中',
    mask: true
  })
  const result: ApiResponse<ProductListResponse> = await productlist({
    page: pageNum.value,
    cate_id: 0,
    store_name: search.value
  });
  uni.hideLoading();
  prizeList.push(...result.data.data);
  if (prizeList.length <= 0) {
    uiwu.toast("未查到您要的宝贝");
  }


}

watch(search, () => {
  if (search.value == "") {
    prizeList.length = 0;
  }
})
</script>

<style lang="scss" scoped>
/* 这里可以添加一些自定义的样式   #867DCF #9FA2D0 */
.header {
  .header-image {
    width: 76rpx;
    height: 76rpx;
    border-radius: 50%;
  }

}

.bg-gray {
  background-color: #f5f5f5;
}

.notice-bg {
  background: linear-gradient(to right, #867DCF, #9FA2D0);
}

.coin-bg {
  background: linear-gradient(to right, #FF762E, #FF843C);
}

.scroll-container-top {
  top: 0;
  position: sticky;
  z-index: 1000;
  /* 确保它在其他内容上方 */
  //transition: background-color 0.3s ease; /* 添加平滑过渡效果 */
  @apply bg-white w-full;

  .menu-item {
    @apply my-2;
  }
}

.scrollview ::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
  -webkit-appearance: none;
  background: transparent;
  color: transparent;
}



.menu-item {
  @apply inline-block text-center px-4 py-1 rounded-3xl ml-1 text-sm;
}

.menu-hover {
  background-color: #2D2D2D;
  @apply text-white font-normal text-base;
}

.swiper-container {
  height: 320rpx;

  .swiper-content {
    height: 286rpx;

    image {
      height: 286rpx;
    }
  }
}

.rand-container {
  image {
    height: 230rpx;
    width: 230rpx;
  }
}

.prize-container {
  .prize-content {
    width: 346rpx;
  }

  image {
    height: 310rpx;
    width: 310rpx;
  }

  text {
    width: 310rpx;
    color: #4C4C4C;
    @apply text-sm py-2;
  }
}
</style>
